<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>发布商品</title>
		<link rel="stylesheet" href="../../static/css/thesecondstep.css" />
		<link rel="stylesheet" href="../../static/css/overall.css" />
		<link rel="stylesheet" href="../../static/bootstrap-3.3.7/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../icon/iconfont.css" />
		<link rel="stylesheet" href="../../static/css/nav.css" />
		<link rel="stylesheet" type="text/css" href="../../static/webuploader-0.1.5/webuploader.css"/>
	</head>

	<body>
		<div class="nav">
			<div class="nav_h flex main_zdy mainAlign_between sideAlign_center">

				<div class="nav_h_l">
					欢迎回到商家管理中心，祝你生意兴隆
				</div>
				<div class="nav_h_r flex main_zdy sideAlign_center">

					<div class="index">商城首页</div>
					<div class="inform">通知提示

						<!--消息通知-->
						<div class="hint">

							<div class="hint_t">最新消息</div>

							<div class="newslist flex side_sdx">

								<div class="flex main_zdy newslist_d sideAlign_center">

									<div class="newslist_d_img"><img src=""></div>
									<div class="flex side_sdx newslist_d_c">
										<div>您的订单：订单单号12455484952889463196323</div>
										<div>2017-07-24 04:20:35</div>
									</div>

								</div>

								<div class="all">查看全部15845条消息</div>

							</div>

						</div>

					</div>

					<!--用户-->
					<div class="user flex main_zdy sideAlign_center">
						<img src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-07-23/a9ab6d58efea01bf2198d58df65e324f.jpg">
						<div>sdddasdasdfqwsdsads<i class="iconfont icon-xiabiao"></i></div>

						<div class="quit">
							<div>管理安全退出</div>
						</div>

					</div>

				</div>

			</div>
			<div class="navigation flex main_zdy sideAlign_center">
				<div class="logo">友惠家</div>
				<div class="navigation_n flex main_zdy">

					<div onclick="window.open('../index.html','_self')">首页</div>
					<div class="onn">商品
						<ul>
							<li>发布商品</li>
							<li>规格管理</li>
							<li>品牌管理</li>
						</ul>
					</div>
					<div onclick="window.open('../indent/goodsindent.html','_self')">订单
						<ul>
							<li>商品订单</li>
							<li>物流配送</li>
							<li>评价管理</li>
						</ul>
					</div>

				</div>
			</div>
		</div>
		<div class="thesecondstep flex main_zdy">

			<div class="goods_l">
				<div class="on" onclick="window.open('./firststep.html','_self')">发布商品</div>
				<div onclick="window.open('./specification.html','_self')" >产品规格</div>
				<div onclick="window.open('./trademark.html','_self')">品牌选择</div>
			</div>

			<div class="goods_r">
				<div class="issue">商家管理中心 > 商品 > 商品发布</div>

				<div class="issue_c">

					<div class="issue_c_order flex main_zdy mainAlign_around">

						<div class="issue_c_order_d main_zdy flex">
							<div class="serialnumber">1</div>
							<div class="flex side_sdx introduces">
								<div>选择商品分类</div>
								<div>确定您的商品所属分类，选择最后一级分类目录进入下一步。</div>
							</div>
						</div>

						<div class="issue_c_order_d main_zdy flex">
							<div class="serialnumber">2</div>
							<div class="flex side_sdx introduce">
								<div>填写商品详情</div>
								<div>填写商品名称、选择商品属性、上传商品图片以及相关信息。</div>
							</div>
						</div>

						<div class="issue_c_order_d main_zdy flex">
							<div class="serialnumber">3</div>
							<div class="flex side_sdx introduces">
								<div>商品发布成功</div>
								<div>完成商品发布，选择跳转页面。</div>
							</div>
						</div>

					</div>

					<div class="basic">基本信息</div>

					<div class="goodsmessage">

						<dl class="flex main_zdy ">
							<dt>当前类别：</dt>
							<dd class="goodsSort">服饰鞋帽 > 运动 > 足球鞋</dd>
						</dl>

						<dl class="flex main_zdy ">
							<dt><span>*</span>商品名称：</dt>
							<dd>
								<input type="text" class="goodinput goodsName" maxlength="50"/>
								<p class="describe">商品名称长度至少3个字符，最长50个汉字</p>
							</dd>
						</dl>

						<dl class="flex main_zdy">
							<dt>商品品牌：</dt>
							<dd>
								<input type="text" class="goodinput goodsBrand" />
								<p class="describe">选择您的商品品牌，有利于商品通过品牌索引方式被找到；如没有您想要的品牌，可从“品牌申请”功能中添加并提交后台审核后再选择。</p>
							</dd>
						</dl>

						<div class="basic">商品规格及图片</div>

						<dl class="flex main_zdy">
							<dt>商品主图</dt>
							<dd>
								<div class="overflow">
									<img src="" class="goodsimg goodsMainImg" id="hostimg"/>
								</div>
								<div id="filePicker">上传图片</div>
							</dd>
						</dl>

						<dl class="flex main_zdy">
							<dt>产品轮播图</dt>
							<dd>
								<div class="overflow badderimg">
									<!--<img src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-08-13/bf587e6cac256221d8d92be649609987.jpg" class="goodsimg" />-->
								</div>
								<div id="badderimg">上传图片</div>
							</dd>
						</dl>

						<dl class="flex main_zdy">
							<dt>商品详细图</dt>
							<dd>
								<div class="overflow particularimg">
								</div>
								<div id="particularimg">上传图片</div>
							</dd>
						</dl>

						<dl class="flex main_zdy">
							<dt>商品规格：</dt>
							<dd>
								<div class="specification_t flex main_zdy sideAlign_center">
									<div>规格</div>
									<div>规格值</div>
									<div>(通过选择规格值建立商品与商品规格的关系)</div>
								</div>

								<div class="standardValue div_contentlist" id="skuLL">
									
									
									
									<script type="text/x-handlebars-template" id="skuu">
										{{#each this}}
											<div class="flex main_zdy standardValue_d">
												<div class="standardValue_d_d flex sideAlign_center main_ydz">
													<span class="specification Father_Title">{{name}}</span>
													<input type="text" id="{{id}}" value="{{value}}" style="width: 50px;" class="alterspecification" />
												</div>
												<div class="standardValue_d_d">
													<div class="flex main_zdy sideAlign_center skuinput">
														{{#each propertyValueVos}}
														<input type="checkbox" class="checkbox li_width" value="{{value}}" id='{{id}}'/><span class="spanname">{{value}}</span>
														{{/each}}
													</div>
												</div>
											</div>
										{{/each}}
									</script>
									
								</div>
								<button class="addspecification" data-toggle="modal" data-target="#myModal"><i class="iconfont icon-jia"></i>添加商品规格</button>
								<p class="describe">可勾选商品对应的规格及规格值，规格及规格值名称都可以自定义；当勾选两种不同规格的规格值后将组合成一种商品SKU，可从下方表格中进行具体设定。 规格可自定义添加，但最多不超过1组；每组规格值也可自定义添加，但最多不超过10个。
								</p>
							</dd>
						</dl>

						<dl class="flex main_zdy">
							<dt>商品价格及库存：</dt>
							<dd>
								<table border="" cellspacing="" cellpadding="" class="goods_table">
									<tr>
										<th class="skuname"></th>
										<th></th>
										<th><span class="redc">*</span>供货价格</th>
										<th><span class="redc">*</span>库存</th>
										<th>商家编号</th>
									</tr>
								</table>
								<table border="" cellspacing="" cellpadding="" class="goods_table goods_table_s" id="skulist_d">
									<!--<tr>
										<td class="skuname_n col-md-1">
										</td>
										<td class="col-md-1">
										</td>
										<td class="col-md-3">
											<input type="text" />
										</td>
										<td class="col-md-3">
											<input type="text" />
										</td>
										<td class="col-md-3">
											<input type="text" />
										</td>
									</tr>-->
								</table>
                         	</div>
								<p class="describe">当规格值较多时，可在操作区域通过滑动滚动条查看超出隐藏区域。</p>
							</dd>
						</dl>

					</div>

					<button class="nextStep">下一步，提交商品发布</button>

				</div>

				<!-- 规格模态框  -->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel">添加商品规格</h4>
							</div>
							<div class="modal-body" id="skuL">
									<!--<dl class="flex main_zdy">
										<dt><input type="checkbox" name="" id="" value="" checked="checked" disabled='disabled'/><span></span></dt>
										<dd></dd>
									</dl>-->
								
								<!--规格-->
								<script type="text/x-handlebars-template" id="sku">
									{{#each this}}
									<dl class="flex main_zdy">
										<dt><input type="checkbox" name="aa" id="{{id}}" value="{{name}}" /><span>{{name}}</span></dt>
										<dd>
											{{#each propertyValueVos}}
												<span>{{value}}</span>
											{{/each}}
										</dd>
									</dl>
									{{/each}}
								</script>
								
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">放弃操作</button>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>
		<script src="../../static/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/overall.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/sku.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/handlebars-v4.0.10.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/nav.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/thesecondstep.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/webuploader-0.1.5/webuploader.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//			$('.aa').click(function(){
			//				var index = $('.aa').index(this);
			//				$('.aaa').eq(index)[0].innerHTML;
			//				$('.b').eq(index).val($('.aaa').eq(index)[0].innerHTML)
			//			})
		</script>
		<script type="text/javascript">
			//主图
			var uploader = WebUploader.create({
				// 选完文件后，是否自动上传。
				auto: true,
				// swf文件路径
				swf: '../../../static/webuploader-0.1.5/Uploader.swf',
				// 文件接收服务端。
				server: 'https://www.uhuijia.com.cn/image-server/uploadImage/batch/oss',
				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				pick: '#filePicker',
				// 只允许选择图片文件。
				accept: {
					title: 'Images',
					extensions: 'gif,jpg,jpeg,bmp,png',
					mimeTypes: 'image/*'
				}
			});
			// 文件上传成功，给item添加成功class, 用样式标记上传成功。
			uploader.on('uploadSuccess', function(file, response) {
				$('#' + file.id).addClass('upload-state-done');
				$('#hostimg').css('display','block')
				$("#hostimg").attr("src",response.data[0].url);
			});
			//轮播
			var badderimg = [];
			var uploader = WebUploader.create({
				// 选完文件后，是否自动上传。
				auto: true,
				// swf文件路径
				swf: '../../../static/webuploader-0.1.5/Uploader.swf',
				// 文件接收服务端。
				server: 'https://www.uhuijia.com.cn/image-server/uploadImage/batch/oss',
				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				pick: '#badderimg',
				// 只允许选择图片文件。
				accept: {
					title: 'Images',
					extensions: 'gif,jpg,jpeg,bmp,png',
					mimeTypes: 'image/*'
				}
			});
			// 文件上传成功，给item添加成功class, 用样式标记上传成功。
			uploader.on('uploadSuccess', function(file, response) {
				$('#' + file.id).addClass('upload-state-done');
				badderimg.push(response.data[0].url)
//				$('#hostimg').css('display','block')
//				$("#hostimg").attr("src",response.data[0].url);
				if(badderimg.length < 4){
					$('.badderimg').append('<img src="'+response.data[0].url+'" class="goodsimg" />')
				}
				
			});
			//详细图
			var particularimg = [];
			var uploader = WebUploader.create({
				// 选完文件后，是否自动上传。
				auto: true,
				// swf文件路径
				swf: '../../../static/webuploader-0.1.5/Uploader.swf',
				// 文件接收服务端。
				server: 'https://www.uhuijia.com.cn/image-server/uploadImage/batch/oss',
				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				pick: '#particularimg',
				// 只允许选择图片文件。
				accept: {
					title: 'Images',
					extensions: 'gif,jpg,jpeg,bmp,png',
					mimeTypes: 'image/*'
				}
			});
			// 文件上传成功，给item添加成功class, 用样式标记上传成功。
			uploader.on('uploadSuccess', function(file, response) {
				$('#' + file.id).addClass('upload-state-done');
				particularimg.push(response.data[0].url)
				if(particularimg.length < 7){
					$('.particularimg').append('<img src="'+response.data[0].url+'" class="goodsimg" />')
				}
				
			});
		</script>
	</body>

</html>